<script lang="tsx" setup>
import { reactive } from 'vue'
import { Table } from '@/components/Table'
import { ElButton, ElImage } from 'element-plus'
import * as CourseApi from '@/api/course/index'
import * as PlatformCourseApi from '@/api/course/platform-course'
import { dateFormatter } from '@/utils/formatTime'
import { getOSSURL } from '@/utils/oss'
import { statusDict } from '../common'

const message = useMessage()

const columns = reactive<TableColumn[]>([
  {
    field: 'courseCoverUrl',
    label: '课程封面',
    formatter: (row) => {
      return (
        <div>
          <ElImage
            class="w-20 h-20"
            src={getOSSURL(row.courseCoverUrl)}
            preview-src-list={[getOSSURL(row.courseCoverUrl)]}
            fit="cover"
          ></ElImage>
        </div>
      )
    }
  },
  {
    field: 'courseName',
    label: '课程名称'
  },
  {
    field: 'validDays',
    label: '课程有效天数'
  },
  // {
  //   field: 'spuStatus',
  //   label: '上架状态',
  //   formatter: (row) => {
  //     /** 表格项状态格式化  1 启用 2 禁用*/
  //     const statusFormatter = (val: CourseApi.CourseStatus) => {
  //       const status = statusDict.find((item) => item.value === val)
  //       return {
  //         type: status?.type,
  //         text: status?.label
  //       }
  //     }
  //     return (
  //       <el-tag class="ml-2" type={statusFormatter(row.spuStatus).type}>
  //         {statusFormatter(row.spuStatus).text}
  //       </el-tag>
  //     )
  //   }
  // },
  {
    field: 'createTime',
    label: '创建时间',
    formatter: (row) => dateFormatter(row, 'createTime', row.createTime)
  },
  {
    field: 'action',
    label: '操作',
    formatter: (row) => {
      return (
        <div>
          <ElButton type="primary" link onClick={() => {}}>
            目录
          </ElButton>
          <ElButton type="primary" link onClick={() => {}}>
            分润金额
          </ElButton>
          <ElButton
            type={row.ifBind ? 'danger' : 'success'}
            link
            onClick={async () => {
              if (row.ifBind) {
                await PlatformCourseApi.unbind([row.id])
              } else {
                await PlatformCourseApi.bind([row.id])
              }
              message.success(row.ifBind ? '下架成功' : '上架成功')
              getList()
            }}
          >
            {row.ifBind ? '下架' : '上架'}
          </ElButton>
        </div>
      )
    }
  }
])

/** 表格相关方法 */
const {
  register: tableRegister,
  tableObject,
  tableMethods
} = useTable({
  getListApi: async (option: any) => {
    const { pageSize, pageNo, ...params } = option

    const newParams = Object.entries(params).reduce((prev, [key, value]) => {
      value && (prev[key] = value)
      return prev
    }, {})
    console.log('getting: ', pageSize, pageNo, newParams)

    const { list, total } = await CourseApi.getPlatformCoursePage({
      pageNo,
      pageSize,
      ...newParams
    })

    return {
      list,
      total
    }
  }
})
const { getList } = tableMethods

onMounted(getList)

const dialogVisible = ref(false)

const open = () => {
  dialogVisible.value = true
}
defineExpose({ open })
</script>

<template>
  <Dialog title="选择课程" v-model="dialogVisible" width="80%">
    <ContentWrap>
      <Table
        @register="tableRegister"
        :columns="columns"
        :data="tableObject.tableList"
        row-key="id"
        :loading="tableObject.loading"
        :pagination="{ total: tableObject.total }"
        v-model:pageSize="tableObject.pageSize"
        v-model:currentPage="tableObject.currentPage"
      />
    </ContentWrap>
  </Dialog>
</template>
